<template>
  <div class="logistics">
    <div class="trajectories_box">
      <!--  -->
      <iframe :src="logisticsData.trailUrl" width="100%" height="100%"></iframe>

      <div class="mask_box"></div>
    </div>

    <!-- 物流信息 -->
    <div class="moduleBox">
      <!-- 物流信息 -->
      <div class="logistics_box">
        <div class="logistics_top">
          <div class="logistics_top_left">
            <img :src="obtainKuidiLogo(comCode)" alt="" srcset="" />
            <div>{{ comName }} {{ routerData.oddNumbers }}</div>
          </div>
          <div class="copy_box" @click="obtainDeliveryType">复制</div>
        </div>

        <div class="logistics_centent">
          <div class="logistics_centent_left">
            <img src="@/assets/images/delivery.svg" alt="" srcset="" />
            <div class="logistics_centent_left_address">
              <div>订单编号：{{ routerData.goodsNumber }}</div>
              <div>收货地址：{{ routerData.address }}</div>
            </div>
          </div>
          <div class="copy_box">复制</div>
        </div>

        <!-- 步骤条 -->
        <div class="logistics_bottom">
          <div class="steps_box">
            <div class="steps_item" v-for="(item, index) in logisticsData.stepsList" :key="index">
              <div class="line_and_drop_box">
                <div class="line_and_drop_inner_box">
                  <div class="line"></div>
                  <div class="steps_icon" :class="{ active: index == 0 }"></div>
                </div>
              </div>
              <div class="steps_content">
                <span>{{ item.context }}</span>
                <span>{{ item.time }}</span>
              </div>
            </div>
          </div>

          <div class="expand_box" v-if="logisticsData.stepsList.length > 0">
            <div
              class="expand_item"
              v-if="logisticsData.stepsList.length < logisticsData.cacheList.length"
              @click="expand"
            >
              <div>展开</div>
              <i class="el-icon-arrow-down" style="width: 3.5vw; height: 3.5vw; color: #666666"></i>
            </div>
            <div class="expand_item" v-else @click="expand">
              <div>收起</div>
              <i class="el-icon-arrow-up" style="width: 3.5vw; height: 3.5vw; color: #666666"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 商品 -->
    <div class="goods_box">
      <div class="goods_item" v-for="(item, index) in goodsList" :key="index" @click="clcickGoods(item)">
        <img :src="item.img" alt="" srcset="" />
        <div class="goods_content">
          <div>{{ item.name }}</div>
          <div><span>￥</span>{{ item.price }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import jquery from 'jquery';
import md5 from './md5';
import { KUAIDI } from './kuaidi';

export default {
  data() {
    return {
      // 获取路由参数
      routerData: {
        // key: '',
        // customer: '',
        // oddNumbers: '', //快递单号
        // to: '', //目的地
        // goodsNumber: '', //订单编号
        // address: '', //收货地址

        key: 'dvfolIgA1331',
        customer: 'EBB06E1EC6E98F47F3C26375DDA447D7',
        oddNumbers: 'YT7420454278932',
        to: '广东省深圳市',
        goodsNumber: '201313-258652123510118',
        address: '广东省深圳市巴南区巴南区福永街 十二栋18层1802',
      },
      comName: '', //快递名称
      comCode: '', //快递的com值
      logisticsData: {
        trailUrl: '',
        stepsList: [],
        cacheList: [],
      },
      goodsList: [], //商品列表
    };
  },
  created() {
    if (this.$route.query.item) {
      this.routerData = JSON.parse(this.$route.query.item);
      this.obtainDeliveryType();
    }
    this.obtainDeliveryType();

    document.title = '物流信息';
    console.log('object', this.routerData, this.routerData.num);
  },
  mounted() {},
  methods: {
    // 获取单号是那个快递公司的
    obtainDeliveryType() {
      let that = this;
      let dataObj = {
        com: '',
        num: this.routerData.oddNumbers,
        from: '',
        to: this.routerData.to,
        resultv2: 4,
      };
      jquery.ajax({
        type: 'get',
        url: '/kuaidiApi/autonumber/autoComNum',
        data: {
          text: this.routerData.oddNumbers,
        },
        dataType: 'JSON',
        header: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        success: function (res) {
          dataObj.com = res.auto[0].comCode;
          that.comCode = res.auto[0].comCode;
          that.comName = res.auto[0].name;
          that.obtainOrigin(dataObj);
        },
      });
    },

    // 获取当前订单起始地和收货地
    obtainOrigin(dataObj) {
      let that = this;
      jquery.ajax({
        type: 'post',
        url: '/pollApi/poll/query.do',
        data: {
          customer: that.routerData.customer,
          sign: md5.hex_md5(JSON.stringify(dataObj) + that.routerData.key + that.routerData.customer).toUpperCase(),
          param: JSON.stringify(dataObj),
        },
        dataType: 'JSON',
        header: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        success: function (res) {
          dataObj.from = res.routeInfo.from.name.split(',').join('');
          that.obtainTrajectories(dataObj);
        },
      });
    },

    // 查询轨迹图
    obtainTrajectories(dataObj) {
      let that = this;
      jquery.ajax({
        type: 'post',
        url: '/pollApi/poll/maptrack.do',
        data: {
          customer: that.routerData.customer,
          sign: md5.hex_md5(JSON.stringify(dataObj) + that.routerData.key + that.routerData.customer).toUpperCase(),
          param: JSON.stringify(dataObj),
        },
        dataType: 'JSON',
        header: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        success: function (res) {
          that.logisticsData.trailUrl = res.trailUrl;
          that.logisticsData.cacheList = res.data;
          that.logisticsData.stepsList = that.logisticsData.cacheList.slice(0, 2);
        },
      });
    },

    // 获取商品列表
    obtainGoods() {
      console.log('获取商品列表');
    },

    // 展开
    expand() {
      if (this.logisticsData.stepsList.length < this.logisticsData.cacheList.length) {
        this.logisticsData.stepsList = this.logisticsData.cacheList;
      } else {
        this.logisticsData.stepsList = this.logisticsData.cacheList.slice(0, 2);
      }
    },

    // 获取快递对应的logo
    obtainKuidiLogo(comCode) {
      for (let i = 0; i < KUAIDI.length; i++) {
        if (KUAIDI[i].com == comCode) {
          return KUAIDI[i].logo;
        }
      }
    },

    // 点击商品跳转回小程序并传递参数
    clcickGoods(item) {
      console.log('点我调回微信小程序中', item);
      // uniWebview.postMessage({
      //   data: {
      //     ...item,
      //   },
      // });
      uniWebview.reLaunch({
        url: '/welfareArea/pages/productDetails/productDetails?item=' + JSON.stringify(item),
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.logistics {
  width: 100%;
  min-height: 100vh;
  background: #f1f1f1;
}

// 轨迹图
.trajectories_box {
  width: 100%;
  height: 305px;
  position: relative;

  iframe {
    border-width: 0px;
  }

  .mask_box {
    width: 100%;
    height: 32px;
    position: absolute;
    bottom: 0;
    background: linear-gradient(
      180deg,
      #f1f1f1 0%,
      rgba(248, 249, 252, 0) 0%,
      rgba(248, 249, 252, 0) 50%,
      #f1f1f1 100%
    );
  }
}

// 物流信息
.moduleBox {
  width: calc(100% - 32px);
  margin: auto;
  border-radius: 8px 8px 8px 8px;
  padding-bottom: 5px;
  background: #fff;
  position: relative;
  top: -32px;

  .logistics_box {
    padding: 10px 15px;
    display: flex;
    flex-flow: wrap;

    // 订单单号
    .logistics_top {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);

      .logistics_top_left {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #222222;

        img {
          width: 20px;
          height: 20px;
          margin-right: 5px;
        }
      }
    }

    // 订单收货地址
    .logistics_centent {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin: 10px 0px;

      .logistics_centent_left {
        width: calc(100% - 36px - 15px);
        font-size: 12px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #222222;
        display: flex;
        align-items: center;

        img {
          width: 26px;
          height: 26px;
          margin-right: 5px;
        }

        .logistics_centent_left_address {
          div {
            width: 100%;
          }

          div:first-child {
            margin-bottom: 2px;
          }
        }
      }
    }

    // 物流信息
    .logistics_bottom {
      width: 100%;

      //   步骤条
      .steps_box {
        width: 100%;
        display: flex;
        flex-flow: wrap;

        .steps_item {
          width: 100%;
          display: flex;
          flex-shrink: 1;
          position: relative;

          .line_and_drop_box {
            width: 25px;
            position: relative;
            top: 10px;

            .line_and_drop_inner_box {
              width: 14px;
              height: 100%;
              position: relative;
            }

            .line {
              width: 1px;
              height: 100%;
              background: #e3e3e3;
              position: absolute;
              left: 50%;
              top: 5px;
              transform: translateX(-50%);
            }

            .steps_icon {
              width: 8px;
              height: 8px;
              border-radius: 50%;
              border: 3px solid #fff;
              background: #e3e3e3;
              position: absolute;
              top: 0px;
              left: 50%;
              transform: translateX(-50%);
              z-index: 1;
            }

            .active {
              border: 3px solid #fbb2b2;
              background: #eb0202;
            }
          }

          .steps_content {
            width: calc(100% - 25px);
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            font-size: 10px;
            color: #666666;
            padding-bottom: 10px;
            span {
              width: 100%;
              display: block;
            }

            span:first-child {
              font-size: 12px;
              color: #222222;
              margin-bottom: 5px;
            }
          }
        }

        .steps_item:last-child .line {
          display: none;
        }
      }

      .expand_box {
        width: 100%;

        .expand_item {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 10px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #666666;
        }
      }
    }
  }

  //   复制
  .copy_box {
    font-size: 12px;
    color: #666666;
    width: 36px;
    height: 19px;
    border-radius: 3px 3px 3px 3px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    line-height: 19px;
    text-align: center;
  }
}

// 商品
.goods_box {
  width: calc(100% - 15px);
  margin: auto;
  padding-bottom: 10px;
  display: grid;
  grid-template-columns: repeat(2, 50%);

  .goods_item {
    width: calc(100% - 15px);
    margin: 7px auto;
    background: #ffffff;
    border-radius: 6px 6px 6px 6px;

    img {
      width: 164px;
      height: 164px;
      border-radius: 6px 6px 0px 0px;
    }

    .goods_content {
      width: calc(100% - 10px);
      margin: auto;
      padding-bottom: 10px;

      div {
        width: 100%;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 15px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
      }

      div:last-child {
        font-size: 16px;
        color: #ff4747;
        margin-top: 10px;

        span {
          font-size: 10px;
        }
      }
    }
  }
}
</style>